<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 3.组件的使用 -->
      <App></App>
      <Count></Count>
    </div>
    <script>
      Vue.config.productionTip = false;
      const Count = {
        template: `
          <div>
            <h1>Count组件</h1>
          </div>
        `,
      };

      const Header = {
        template: `
          <div>
            <h1>header组件</h1>
          </div>
        `,
      };

      const App = {
        template: `
          <div>
            <h1>App组件</h1>
            <Count/>
            <Header/>
          </div>
        `,
        //需要把子组件在当前组件中注册才能使用
        components: {
          Count,
        },
      };
      /* 
        如果一个组件被经常使用,那么我们没有必要每次使用的时候进行注册,而是可以全局注册
        Vue.component方法可以全局注册一个组件
      */
     Vue.component("Header",Header)

      const vm = new Vue({
        el: "#app",
        data() {
          return {};
        },
        components: {
          /* 
            - 创建组件时可以把组件直接简写为配置对象即可 
            - 在注册组件的时候,如果发现当前注册的组件只是一个配置对象,Vue会帮我们把这个对象传递给Vue.extend方法,然后得到一个VueComponent构造函数
          */
          App,
        },
      });
    </script>
  </body>
</html>
